<template>
  <div class="xiaoshou">
    <div style="background: #ccc"><h1>明细</h1></div>
    <div class="mingxi">
      <div>
        <div @click="xhe()">销售额</div>
        <div>{{ price }}</div>
      </div>
      <div>
        <div>退单额</div>
        <div>￥0.00</div>
      </div>
      <div>
        <div>收入</div>
        <div>￥0.00</div>
      </div>
      <div>
        <div>现金支付</div>
        <div>￥0.00</div>
      </div>
      <div>
        <div>线上支付</div>
        <div>￥0.00</div>
      </div>
      <div>
        <div>扫码支付</div>
        <div>￥0.00</div>
      </div>
      <div>
        <div>客单量</div>
        <div>0笔</div>
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="xuhao" label="序号" width="150" height="30">
      </el-table-column>
      <el-table-column prop="cpname" label="菜品名称" width="120">
      </el-table-column>
      <el-table-column prop="shouru" label="收入" width="120"> </el-table-column>
      <el-table-column prop="xiaoshoue" label="销售额" width="120">
      </el-table-column>
      <el-table-column prop="tuidane" label="退单额" width="300">
      </el-table-column>
      <el-table-column prop="kedan" label="客单量(笔)" width="200">
      </el-table-column>
      <el-table-column prop="kedanjia" label="客单价" width="200">
      </el-table-column>
      <el-table-column
        prop="yhed"
        label="优惠额度"
        width="200"
      >
      </el-table-column>
      <!-- <el-table-column prop="zip" label="操作" width="150"> -->
        <!-- <template>
          <el-button @click="handleClick()" type="text" size="small"
            >查看订单</el-button
          >
          <el-button @click="del()" type="text" size="small">删除</el-button>
        </template> -->
      <!-- </el-table-column> -->
    </el-table>

    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="500">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { xiaoshou } from "@/apis/yanwengang/yanwengang.js";

export default {
  data() {
    return {
      price: "",
      tableData: [
        {
          xuhao:"01",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"4",
          kedanjia:"50.00",
          yhed:"-5"
        },
        {
          xuhao:"02",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"3",
          kedanjia:"50.00",
          yhed:"-5"
        },
        {
          xuhao:"03",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"3",
          kedanjia:"50.00",
          yhed:""
        },
        {
          xuhao:"04",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"3",
          kedanjia:"50.00",
          yhed:"-5"
        },
        {
          xuhao:"05",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"4",
          kedanjia:"50.00",
          yhed:"-5"
        },
        {
          xuhao:"06",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"3",
          kedanjia:"50.00",
          yhed:"-5"
        },
        {
          xuhao:"07",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"6",
          kedanjia:"50.00",
          yhed:""
        },
        {
          xuhao:"08",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"3",
          kedanjia:"50.00",
          yhed:"-5"
        },
        {
          xuhao:"09",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"3",
          kedanjia:"50.00",
          yhed:"-5"
        },
        {
          xuhao:"10",
          cpname:"农家小炒肉",
          shouru:"1000",
          xiaoshoue:"100",
          tuidane:"10",
          kedan:"3",
          kedanjia:"50.00",
          yhed:""
        },
      ],
    };
  },
  methods: {},
  mounted() {
    xiaoshou().then((ok) => {
      console.log(ok);
      this.price = ok.data.data;
    });
  },
};
</script>

<style scoped>
.mingxi {
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
}
.mingxi div {
  width: 80px;
  border: 1px solid;
}
.fenye {
  margin: 10px 0px;
}
</style>